<template>
  <div style="height: 100vh;overflow-x: hidden;" class="wrapper">
    <!-- 回到顶部 -->
    <el-backtop target=".wrapper" style="height:100px;width:100px;">
      <i class="el-icon-caret-top" style="font-size:50px;"></i>
    </el-backtop>
    <Top/>

    <!-- 搜索框 -->
    <div style="width:100%;margin-top: 4%;">
    <div style="width:95%;margin: auto;">
<!--      <div style="background-color: #A9E2F3;padding: 2%;">-->
        <el-input size="small"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="input"
                  clearable
                  @keyup.enter.native="blogsearch(input)"
                  style="font-size:40px;width:100%;"
        >
<!--          <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
        </el-input>
    </div>
    </div>

    <!-- 内容区 -->
    <div>
      <div v-model="blogData" class="grid-content content bg-purple blog_bg " v-loading="loading">

        <el-row :gutter="20">
          <el-col :span="12"><div style="margin: 15px 0px 15px 20px;color: blueviolet;font-size:36px;">文章</div></el-col>
          <el-col :span="12"><div style="float: right;margin: 10px 20px 0px 0px;font-size:36px;">共
            <span style="font-size: 43px;color: rgb(6, 154, 240);">{{total}}</span> 篇</div></el-col>
        </el-row>


        <!-- 分割线 -->
        <div  style="height:3px; margin: 5px 0; border:none; border-top:3px solid  #1eb9e0;"></div>

        <!-- 文章 -->
        <div>
          <div style=" width: 95%; margin: 2%;" v-for="(item,index) in blogData" :key="index" >

            <router-link :to="'/blog/'+item.id">
              <el-card :body-style="{ padding: '15px' }"  style="min-height:300px;">
                <el-row :gutter="20">
                  <el-col :span="15">
                    <div>
                      <div style="font-size:40px;font-weight:bold;">{{item.title}}</div>
                      <div style="font-size: 35px;min-height:100px;">{{item.description}}</div>
                    </div>
                  </el-col>
                  <el-col :span="9">
                    <div style="width:100%;height:180px;" v-lazy-container="{ selector: 'img' }">
<!--                      <el-image-->
<!--                          style="width: 100%; height: 100%"-->
<!--                          :src="item.firstPicture"-->
<!--                      >-->
<!--&lt;!&ndash;                        :src="item.firstPicture"&ndash;&gt;-->
<!--                      </el-image>-->
                      <img
                          style="width: 100%; height: 100%"
                          :data-src="item.firstPicture"
                      />
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <div style="margin-top: 10px;margin-bottom:20px;">
                    <el-tag style="margin-right: 10px;font-size:30px;" ><span> {{item.flag}}</span></el-tag>
                    <el-tag style="margin-right: 10px;font-size:30px;" type="success"><span> {{item.ttype.name}}</span></el-tag>
                    <el-tag style="margin-right: 10px;font-size:30px;" type="info" v-for="tag in item.tblogTags"><span> {{tag.ttag.name}}</span></el-tag>
                  </div>
                </el-row>
                <el-row>
                  <div style="height:40px;line-height:40px;">
                    <i style="margin-left: 20px;" class="el-icon-date"><span style="font-size: 30px;"> {{item.createTime}}</span></i>
                    <i style="margin-left: 20px;" class="el-icon-view"><span style="font-size: 30px;"> {{item.views}}</span></i>
                    <i style="margin-left: 20px;" class="el-icon-chat-line-square"><span style="font-size: 30px;"> {{item.commentCount}}</span></i>
                  </div>
                </el-row>
              </el-card>
            </router-link>
            <el-divider></el-divider>
          </div>
        </div>
      </div>
    </div>

    <!--占位-->
    <div style="height:200px;"></div>
  </div>
</template>

<script>
import Top from '@/components/move/Top'
export default {
  name: 'Search',
  components:{ Top },
  data () {
    return {
      blogData:[],
      total:0,
      size:5,
      searchkey:'',
      input:'',
      loading:true,
    }
  },
  // props:['keyword'],
  mounted() {
    // this.searchkey = this.keyword
    this.initBlog()

  },
  methods:{
    //初始化博客数据
    initBlog(){
      const _this = this
      this.axios.get('/blog/getByTitle?title=' + this.searchkey ).then(resp=>{
        // console.log(resp)
        _this.blogData = resp.data.obj
        _this.total = resp.data.obj.length
        this.loading = false
      })
    },
    //搜索博客
    blogsearch(input){
      const _this = this
      this.axios.get('/blog/getByTitle?title=' + input ).then(resp=>{
        // console.log(resp)
        _this.blogData = resp.data.obj
        _this.total = resp.data.obj.length
        if(_this.total > 0){
          this.$message({
            message: '查询成功！',
            type: 'success'
          });
        }else{
          this.$message('抱歉，没有找到相关文章，请重新搜索~');
        }
      })
    }
  }
}
</script>

<style scoped>
.blog_bg{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 90%;
  margin-top: 3% !important;
  margin-bottom: 5% !important;
  margin: auto;
  min-height: 500px;
}

</style>